<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cool Cloud</title>
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <!-- swiper-->
    <link rel="stylesheet" href="plugins/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="dist/js/xcConfirm/css/xcConfirm.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
            border-radius: 0.5em 0.5em 0.5em 0.5em;
            box-shadow: 0 0 3rem -1rem rgba(0, 0, 0, 0.5);
        }

        .col-md-6 {
            height: 340px;
            margin: 10px 0 10px 0;
        }

        .swiper-container:hover {
            transform: translateY(-0.1rem) scale(1.0125);
            box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
            -webkit-transition: all 300ms ease-in-out;
            -moz-transition: all 300ms ease-in-out;
            -ms-transition: all 300ms ease-in-out;
            -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
        }
        .tip {
            padding: 0;
            color: white;
            z-index: 100;
            position: absolute;
            left: 20px;
            top: 20px;
        }
        .tipmsg {
            background-color: #f39c12;
            position: absolute;
            z-index: 100;
            right: 3%;
            top: 80px;
            padding: 5px 5px 5px 5px;
            border-radius: 15px;
            border: 2px solid #ddd;
            box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<div class="tipmsg" style="display: none">
</div>
<body class="hold-transition sidebar-mini">

<!-- wrapper -->
<div class="wrapper">
    <!-- Navbar -->
    <div th:replace="common/header :: header"></div>

    <!-- Main Sidebar Container -->
    <div th:replace="common/menu :: sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div th:replace="content/indexContent :: indexcontent"></div>

    <!-- /Footer -->
    <div th:replace="common/footer :: footer"></div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark"></aside>
</div>


<!--编辑个人信息-->
<div th:replace="common/editInforModel :: editinfo"></div>


<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!--swiper-->
<script src="plugins/swiper/swiper-bundle.min.js"></script>
<!--邀请注册-->
<script src="dist/js/invite.js"></script>
<!--搜索-->
<script src="dist/js/search.js"></script>
<!--xcConfirm-->
<script src="dist/js/xcConfirm/js/xcConfirm.js"></script>
<!-- Page specific script -->
<script>

    function editMyInfo() {
        $(".userName").val("[[${session.loginUser.userName}]]");
        $(".edit").click();
    }

    function submit() {
        let userName = $(".userName").val();
        let IwtNewPsd = $(".IwtNewPsd").val();
        let IwtOralPsd = $(".IwtOralPsd").val();
        let id = [[${session.loginUser.userId}]];
        console.log(userName, id, IwtNewPsd, IwtOralPsd)
        if (userName == '') {
            alert("用户名不能为空！");
            return;
        }
        if ((IwtNewPsd == '' && IwtOralPsd != '') || (IwtNewPsd != '' && IwtOralPsd == '')) {
            alert("需要修改密码,原密码与新密码均不能为空！");
            return;
        }
        $.ajax({
            url: "UpdateInfo",
            type: "POST",
            data: {
                "id": id,
                "username": userName,
                "IwtNewPsd": IwtNewPsd,
                "IwtOralPsd": IwtOralPsd
            },
            success: function (date) {
                if (date.status == "psdwrong") {
                    alert("原密码错误！")
                } else if (date.status == "success" && IwtNewPsd != '') {
                    $("#logout").click();
                } else if (date.status == "success" && IwtNewPsd == '') {
                    $(".tipmsg").html($('<span  style="margin-right: 25px">  用户名修改成功！</span><i class="fas fa-times" onclick="closeTip()"></i>'));
                    $(".tipmsg").show();
                    $('.close').click();
                    setInterval("location.reload( )", 1000);
                }
            }
        })
    }

    function closeTip() {
        $(".tipmsg").html("");
        $(".tipmsg").hide();
    }

    $(function () {
        var areaChartData = {
            labels: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            datasets: [
                {
                    label: '音乐',
                    backgroundColor: 'rgba(60,141,188,0.9)',
                    borderColor: 'rgba(60,141,188,0.8)',
                    pointRadius: false,
                    pointColor: '#3b8bba',
                    pointStrokeColor: 'rgba(60,141,188,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(60,141,188,1)',
                    data: [
                        [[${statistics.fileWeekCount[0].music}]],
                        [[${statistics.fileWeekCount[1].music}]],
                        [[${statistics.fileWeekCount[2].music}]],
                        [[${statistics.fileWeekCount[3].music}]],
                        [[${statistics.fileWeekCount[4].music}]],
                        [[${statistics.fileWeekCount[5].music}]],
                        [[${statistics.fileWeekCount[6].music}]],
                    ]
                },
                {
                    label: '文档',
                    backgroundColor: 'rgba(210, 214, 222, 1)',
                    borderColor: 'rgba(210, 214, 222, 1)',
                    pointRadius: false,
                    pointColor: 'rgba(210, 214, 222, 1)',
                    pointStrokeColor: '#c1c7d1',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [
                        [[${statistics.fileWeekCount[0].doc}]],
                        [[${statistics.fileWeekCount[1].doc}]],
                        [[${statistics.fileWeekCount[2].doc}]],
                        [[${statistics.fileWeekCount[3].doc}]],
                        [[${statistics.fileWeekCount[4].doc}]],
                        [[${statistics.fileWeekCount[5].doc}]],
                        [[${statistics.fileWeekCount[6].doc}]],
                    ]
                },
                {
                    label: '视频',
                    backgroundColor: 'rgba(111, 214, 222, 1)',
                    borderColor: 'rgba(111, 214, 222, 1)',
                    pointRadius: false,
                    pointColor: 'rgba(111, 214, 222, 1)',
                    pointStrokeColor: '#c1c7d1',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(121,220,220,1)',
                    data: [
                        [[${statistics.fileWeekCount[0].video}]],
                        [[${statistics.fileWeekCount[1].video}]],
                        [[${statistics.fileWeekCount[2].video}]],
                        [[${statistics.fileWeekCount[3].video}]],
                        [[${statistics.fileWeekCount[4].video}]],
                        [[${statistics.fileWeekCount[5].video}]],
                        [[${statistics.fileWeekCount[6].video}]],
                    ]
                },
                {
                    label: '图片',
                    backgroundColor: 'rgb(162,165,16,1)',
                    borderColor: 'rgb(162,165,16,1)',
                    pointRadius: false,
                    pointColor: 'rgb(162,165,16,1)',
                    pointStrokeColor: 'rgb(38,165,55,1)',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgb(162,165,16,1)',
                    data: [
                        [[${statistics.fileWeekCount[0].image}]],
                        [[${statistics.fileWeekCount[1].image}]],
                        [[${statistics.fileWeekCount[2].image}]],
                        [[${statistics.fileWeekCount[3].image}]],
                        [[${statistics.fileWeekCount[4].image}]],
                        [[${statistics.fileWeekCount[5].image}]],
                        [[${statistics.fileWeekCount[6].image}]],
                    ]
                },
                {
                    label: '其他',
                    backgroundColor: 'rgb(38,165,55,1)',
                    borderColor: 'rgb(38,165,55,1)',
                    pointRadius: false,
                    pointColor: 'rgb(38,165,55,1)',
                    pointStrokeColor: '#c1c7d1',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgb(38,165,55,1)',
                    data: [
                        [[${statistics.fileWeekCount[0].other}]],
                        [[${statistics.fileWeekCount[1].other}]],
                        [[${statistics.fileWeekCount[2].other}]],
                        [[${statistics.fileWeekCount[3].other}]],
                        [[${statistics.fileWeekCount[4].other}]],
                        [[${statistics.fileWeekCount[5].other}]],
                        [[${statistics.fileWeekCount[6].other}]],
                    ]
                },
            ]
        }

        var areaChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: true,
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display: true,
                    }
                }]
            }
        }

        //-------------
        //- LINE CHART -
        //--------------
        var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
        var lineChartOptions = $.extend(true, {}, areaChartOptions)
        var lineChartData = $.extend(true, {}, areaChartData)
        lineChartData.datasets[0].fill = false;
        lineChartData.datasets[1].fill = false;
        lineChartData.datasets[2].fill = false;
        lineChartData.datasets[3].fill = false;
        lineChartData.datasets[4].fill = false;
        lineChartOptions.datasetFill = false

        var lineChart = new Chart(lineChartCanvas, {
            type: 'line',
            data: lineChartData,
            options: lineChartOptions
        })

        //-------------
        //- DONUT CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
        var donutData = {
            labels: [
                '已使用',
                '剩余',
            ],
            datasets: [
                {
                    data: [
                        [[${statistics.fileStore.currentSize/1024}]],
                        [[${(statistics.fileStore.maxSize-statistics.fileStore.currentSize)/1024}]],
                    ],
                    backgroundColor: ['#f56954', '#00a65a'],
                }
            ]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        var donutChart = new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

        //-------------
        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
        var pieData = {
            labels: [
                '文档',
                '图像',
                '视频',
                '音乐',
                '其他'
            ],
            datasets: [
                {
                    data: [
                        [[${statistics.doc}]],
                        [[${statistics.image}]],
                        [[${statistics.video}]],
                        [[${statistics.music}]],
                        [[${statistics.other}]],
                    ],
                    backgroundColor: [
                        '#3498db',
                        '#28a745',
                        '#ffc107',
                        '#dc3545',
                        '#343a40',],
                }
            ]
        }

        var pieOptions = {
            maintainAspectRatio: true,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        var pieChart = new Chart(pieChartCanvas, {
            type: 'pie',
            data: pieData,
            options: pieOptions
        })

        //-------------
        //- BAR CHART -
        //-------------
        var barChartData = $.extend(true, {}, areaChartData)
        var temp0 = areaChartData.datasets[0]
        var temp1 = areaChartData.datasets[1]
        barChartData.datasets[0] = temp1
        barChartData.datasets[1] = temp0

        var barChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            datasetFill: false
        }


        //---------------------
        //- STACKED BAR CHART -
        //---------------------
        var stackedBarChartData = $.extend(true, {}, barChartData)

        var stackedBarChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }


    })

    var mySwiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 3000
        },
    })

</script>
</body>
</html>
